import { memo } from "react"
import Image from "@/components/base/Image"
import { css } from "@emotion/react"
import styled from "@emotion/styled"

const Content = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10rem;
    width: 100%;
    flex: 1;
    background: #f5f5f5;
`

const Headers = styled.div`
    font-family: Gilroy;
    color: #131416;
    background: #fff;
    font-size: 18rem;
    font-style: normal;
    font-weight: 700;
    line-height: 28rem;
    text-transform: capitalize;
    height: 44rem;
    padding: 8rem 12rem;
    position: absolute;
    left: 0;
    right: 0;
`

const Info = styled.div`
    color: #40444f;
    text-align: center;
    font-family: Gilroy-Regular;
    font-size: 14rem;
    font-style: normal;
    font-weight: 400;
    line-height: 20rem;
`

const Invite = () => {
    return (
        <>
            <Headers>Invite</Headers>
            <Content>
                <Image
                    css={css`
                        width: 200rem;
                        height: 200rem;
                    `}
                    src="base_image/comingSoon.webp"
                />
                <Info>Coming Soon</Info>
            </Content>
        </>
    )
}

export default memo(Invite)
